<template>
  <Layout>
    <div class="container">
      <div class="hero">
        <h1 class="hero-title">{{general.title}}</h1>
        <h2 class="hero-subtitle">
          {{general.subtitle}}
        </h2>
      </div>
      <div class="projects" data-v-50cbff3e="">
        <div class="project" data-v-50cbff3e="" v-for="project in projects" :key="project.node.id">
          <g-link
            :to="'/project/'+ project.node.name+'/'"
            class="project-link"
            data-v-50cbff3e="">
            <g-image
              alt="Banana"
              :src="toStrioUrl(project.node.cover.url)"
              width="2560"
              data-src=""
              data-srcset=""
              data-sizes=""
              class="thumbnail g-image g-image--lazy g-image--loaded"
              data-v-50cbff3e=""/>
            <h3 class="project-title" data-v-50cbff3e="">{{project.node.title}}</h3>
            <div class="categories" data-v-50cbff3e="">
              <span class="category" v-for="category in project.node.categories" :key="category.id" data-v-50cbff3e="">{{category.title}}</span>
            </div>
          </g-link>
        </div>
      </div>
    </div>

    <div data-v-460714ac="">
      <div data-v-460714ac="" class="latest-journals-heading container">
        <span data-v-460714ac="" class="label">Latest and greatest</span>
      </div>
      <div data-v-460714ac="" class="latest-journals">
        <div data-v-460714ac="" class="container">
          <g-link
            data-v-460714ac="" v-for="journal in journals" :key="journal.node.id"
            :to="'/journal/'+journal.node.name + '/'"
            class="journal"
            ><h3 data-v-460714ac="" class="journal-title">
              {{journal.node.title}}
            </h3></g-link>
        </div>
      </div>
    </div>
  </Layout>
</template>
<page-query>
query {
   general: allStrapiGeneral {
    edges {
      node {
    		id
        title
        subtitle
      }
    }
  }

  projects: allStrapiProject {
    edges{
      node{
        id
        title
        name
        color
        bgcolor
        categories{
          id
          title
          
        }
        cover{
          url
        }
        content
      }
    }
  }

  journals: allStrapiJournal {
    edges{
      node{
        id
        name
        title
        subtitle
        author
        created_at
        time
        content
      }
    }
  }
}
</page-query>
<script>

export default {
  metaInfo: {
    title: "HomePage",
  },
  computed: {
    general() {
      return this.$page.general.edges[0].node
    },
    projects() {
      return this.$page.projects.edges
    },
    journals() {
      return this.$page.journals.edges
    }
  },
  methods: {
    toStrioUrl(url) {
      return process.env.GRIDSOME_STRAPI_URL + url
    }
  }
};
</script>

<style>
</style>
